<template>
    <div class="table_box">
        <el-table :data="dataList" border style="width: 100%" :height="height" :stripe="stripe">
            <template v-for="field in fields">
                 <!-- 索引列 -->
                <template v-if="field.prop === '__index'">
                    <el-table-column
                        type="index"
                        :width="field.width"
                        :label="field.label"
                        align="center">
                    </el-table-column>
                </template>
                <!-- 多选列表 -->
                <template v-else-if="field.prop === '__checkbox'">
                    <el-table-column
                        type="selection"
                        :width="field.width"
                        align="center">
                    </el-table-column>
                </template>
                <!-- 操作列 -->
                <template v-else-if="field.prop === '__action'">
                    <el-table-column
                      :fixed="field.fixed == null ? 'right' :field.fixed"
                      :label="field.label"
                      :width="field.width"
                      align="center">
                      <template slot-scope="scope">
                        <!-- <span v-for="action in field.actions" :key="action.label" v-has:table="action.auth"> -->
                        <span v-for="action in field.actions" :key="action.label">
                            <template v-if="action.type === 'add'">
                                <a href="javascript:void(0);"
                                    @click="handleClick(action.func, scope.row, content)"
                                    >
                                {{ action.label }}
                                </a>
                            </template>
                            <template v-else-if="action.type === 'edit'">
                                <a href="javascript:void(0);"
                                    @click="handleClick(action.func, scope.row, content)"
                                    >
                                {{ action.label }}
                                </a>
                            </template>
                            <template v-else-if="action.type === 'detail'">
                                <a href="javascript:void(0);"
                                    @click="handleClick(action.func, scope.row, content)"
                                    >
                                {{ action.label }}
                                </a>
                            </template>
                            <template v-else-if="action.type === 'delete'">
                                <a href="javascript:void(0);"
                                    @click="handleClick(action.func, scope.row, content)"
                                    >
                                {{ action.label }}
                                </a>
                            </template>
                        </span>
                      </template>
                    </el-table-column>
                </template>
                 <!-- 组件列 -->
                <template v-else-if="field.prop === '__component'">
                    <el-table-column
                        :label="field.label"
                        :width="field.width"
                        align="center">
                    <template slot-scope="scope">
                        <component
                            :is="field.componentName"
                            :row-data="scope.row"
                            :column-data="scope.column"
                            :row-index="scope.$index">
                        </component>
                    </template>
                    </el-table-column>
                </template>
                <!-- 属性列 -->
                <template v-else>
                    <el-table-column
                        :prop="field.prop"
                        :label="field.label"
                        :width="field.width"
                        :show-overflow-tooltip="field.showTip == null? true : field.showTip"
                        :formatter="field.formatter"
                         align="center">
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <div class="paginationBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
            </el-pagination>
                <!-- :page-sizes="pageSizeArray" -->
        </div>
    </div>
</template>

<script>

import { Message  } from 'element-ui'
    export default {
        props:{
            apiUrl: {
                type: String,
                required: true
            },
            height: {
                type: Number,
                required: false
            },
            stripe: {
                type: Boolean,
                default: function _default() {
                    return true;
                }
            },
            fields: {
                type: Array,
                required: true
            },
            appendParams: {
                type: Object,
                default: function _default() {
                    return {};
                }
            },
            /* pageSize:{
                type: Number,
                default: function _default() {
                    return 30;
                }
            }, */
            pageSizeArray:{
                type: Array,
                default: function _default() {
                    return [20, 30, 50, 100];
                }
            },
            content:{
                type: Object,
                required: true
            },
        },
        data() {
            return {
                dataList: null,
                totalSize: 0,
                currentPage:1,
                pageSize:20
            }
        },
        mounted() {
            this.$on('vuetable:current-refresh',()=>{
                this.loadData();
            })
            this.$on('vuetable:refresh',()=>{
                this.currentPage = 1;
                this.loadData();
            })
        },
        created() {
            this.loadData();
        },
        watch:{
            currentPage(val,oldVal){
                this.loadData();
            },
            pageSize(val,oldVal){
                this.loadData();
            }
        },
        methods: {
            handleClick(func, row, content){
                if(func){
                   func(content, row);
                }
            },
            loadData(){
                // 获取数据
                this.axios.get(this.apiUrl + "?" + this.getAllQueryParams()).then((response)=>{
                    if(response.data.code == 200){
                        this.loading = false;
                        this.dataList = response.data.data.dataList;
                        this.totalSize = response.data.data.totalRow;
                    }else{
                        this.$message({
                            message: response.data.message,
                            type:'error',
                            center: true
                        });
                    }
                })
            },
            getAllQueryParams() {
                let vm = this;
                let params = [
                    'page=' + this.currentPage,
                    // 'page=' + this.pageSize,
                ].join('&');

                for(let item in this.appendParams){
                    // 为了0和false
                    if(vm.appendParams[item] != null && vm.appendParams[item] !== ""){
                        params += "&" + item + "=" + vm.appendParams[item];
                    }
                }
                return params;
            },
            handleSizeChange(val){
                if(isNaN(val)){
                    val = 30;
                }
                this.pageSize = val;
            },
            handleCurrentChange(val){
                if(val < 1){
                    val = 1;
                }
                this.currentPage = val;
            }
        },
        components: {}
    }
</script>

<style>
/* .table_box{ padding: 10px; background: #fff; } */
/* .el-table--border, .el-table--group { border-width: 0; } */
.el-table td{ font-size: 12px; }
.el-table td, .el-table th{ padding: 8px 0; }
.paginationBox{ text-align: right; padding-top: 10px;}
</style>
